<template>
  <view class="container">
     <view class="header">
      <image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
      <view class="user-info">
        <text class="username">{{ username }}</text>
        <br>
        <text class="user-id">ID: {{ userId }}</text>
      </view>
    </view>
    <view class="main-content">
      <view class="option" @click="handleAddress">
        <image class="icon" :src="addressIconUrl" mode="aspectFill"></image>
        <text>我的地址</text>
      </view>
      <view class="option" @click="handleFollow">
        <image class="icon" :src="followIconUrl" mode="aspectFill"></image>
        <text>我的关注</text>
      </view>
      <view class="option" @click="handleOrder">
        <image class="icon" :src="orderIconUrl" mode="aspectFill"></image>
        <text>我的订单</text>
      </view>
    </view>
    <button class="logout-button" @click="handleLogout">退出登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: '/static/assets/user.png', // 默认头像
      username: '', // 默认用户名
      userId: '', // 默认用户ID
      addressIconUrl: '/static/地址.png', 
      followIconUrl: '/static/关注.png', 
      orderIconUrl: '/static/_订单.png', 
    };
    
  },
  onShow() {
    // 每次页面显示时都重新加载用户信息
    this.loadUserInfo();
  },
  methods: {
    loadUserInfo() {
      try {
        // 从本地存储获取用户信息
        const userInfo = uni.getStorageSync('userInfo');
        
        if (userInfo) {
          // 动态设置用户信息
          this.avatarUrl = userInfo.avatar || '/static/assets/user.png';
          this.username = userInfo.username || userInfo.name || '新用户';
          
          // 优先使用userId，如果没有则使用id或其他标识
          this.userId = userInfo.userId || userInfo.id || '未设置ID';
          
          console.log('用户信息加载成功:', {
            avatar: this.avatarUrl,
            username: this.username,
            userId: this.userId
          });
        } else {
          console.warn('未找到用户信息，用户可能未登录');
          // 可以在这里跳转到登录页面
          // uni.redirectTo({ url: '/pages/login/login' });
        }
      } catch (error) {
        console.error('加载用户信息失败:', error);
        uni.showToast({
          title: '加载用户信息失败',
          icon: 'none'
        });
      }
    },
    handleAddress() {
      // 跳转到我的地址页面逻辑，例如 uni.navigateTo({ url: '/pages/addressEdit/addressEdit' })
      uni.navigateTo({ url: '/pages/addressEdit/addressEdit' })
      console.log('进入我的地址页面');
    },
    handleFollow() {
      // 跳转到我的关注页面逻辑，例如 uni.navigateTo({ url: '/pages/morestores/index' })
      uni.navigateTo({ url: '/pages/morestores/index' })
      console.log('进入我的关注页面');
    },
    handleOrder() {
      // 跳转到我的订单页面逻辑，例如 uni.navigateTo({ url: '/pages/order/order' })
      uni.switchTab({ url: '/pages/order/index' })
      console.log('进入我的订单页面');
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: res => {
          if (res.confirm) {
            // 执行退出登录操作，如清除token等
            // 这里假设清除登录状态相关数据（如果有存储token等）
            uni.removeStorageSync('token'); 
            uni.removeStorageSync('userInfo'); 
            // 跳转到登录页面
            uni.redirectTo({ url: '/pages/login/login' }); 
            console.log('退出登录成功');
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f4f4f4;
  padding: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.header {
  width: 100%; /* 改为100%宽度 */
  max-width: 750rpx; /* 可选：设置最大宽度 */
  height: 250px;
  background: linear-gradient(to right, #0099ff, #66ccff);
  padding: 20rpx;
  text-align: center;
  border-radius: 10rpx;
  margin: 0 auto; /* 居中显示 */
  box-sizing: border-box; /* 包含padding在内计算宽度 */
}

.avatar {
  width: 170rpx;
  height: 170rpx;
  border-radius: 50%;
  margin-top: 30px;
}

.user-info {
  margin-left: 60px;
  width: calc(100% - 120rpx); /* 使用calc计算宽度 */
  background-color: white;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 5px;
  box-sizing: border-box;
}

.username {
  font-size: 36rpx;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 24rpx;
  color: #999;
}

.main-content {
  background-color: white;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.option {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.logout-button {
  background-color: #0099ff;
  color: white;
  padding: 20rpx;
  border-radius: 10rpx;
  text-align: center;
}
</style>